<!--
 * @Author: gaoyu gy15354315043@163.com
 * @Date: 2024-10-15 17:09:57
 * @LastEditors: 郝奔 1425466221@qq.com
 * @LastEditTime: 2024-12-23 15:51:40
 * @Description: 未读消息列表
 * Copyright (c) 2024-present HBIS Digital Technology Co.,Ltd. All rights reserved. 
-->
<template>
    <div>
        <DtDrawer ref="dtDrawerRef" v-model="visible" @close="visible = false" :isFooterSlot="false" :size="'mini'"
            :hiddenFullBtn="true" :append-to-body="true" class="unreadMessageDrawer" :loading="loading"
            :close-on-click-modal="true">
            <template #header>
                <div class="header">
                    <div class="headerTitle">消息</div>
                    <!-- <div class="headerMore" @click="handleMore">查看全部</div> -->
                    <el-button link type="primary" class="headerMore" @click="handleMore">查看全部</el-button>
                </div>
            </template>
            <div class="messageContent">
                <div class="tabs">
                    <div class="tabsButton">
                        <el-radio-group v-model="stateData.activeName" @change="changeMessageType">
                            <el-radio-button :label="stateData.noticeName" :value="2" />
                            <el-radio-button :label="stateData.platName" :value="1" />
                        </el-radio-group>
                    </div>
                    <el-button type="primary" :icon="CircleCheck" link class="readButton"
                        :disabled="stateData.unReadMessageList.length == 0" @click="handleAllRead">全部标记已读</el-button>
                </div>
                <div class="unReadMessageList">
                    <div v-if="stateData.unReadMessageList.length == 0" class="emptybox">
                        <svg-icon icon-class="no-message" class="no-message" />
                        <p class="noMessageTip">当前未收到任何消息</p>
                    </div>
                    <div v-for="(item, index) in stateData.unReadMessageList" :key="index" class="unReadMessageItem"
                        v-else @click="handleDetail(item)">
                        <div class="titleAndTime">
                            <div class="title">{{ item.messageTitle }}</div>
                            <div class="time">{{ item.realSendTime }}</div>
                        </div>
                        <div class="unReadContent">{{ item.messageContent }}</div>
                    </div>
                </div>
            </div>
        </DtDrawer>
    </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { getCurrentInstance } from 'vue'
import { CircleCheck } from '@element-plus/icons-vue'
import { mySystemNotice, myPlatNotice, clear, read, unReadMessage } from '../../api/index'
import { platMessageListType } from '../../api/types'
import { useWebsocketStore } from '@/framework/store/modules/websocket';
import { useSettingsStore } from '@/framework/store/modules/settings';
import { getToken } from '@/framework/utils/auth';
const settingsStore = useSettingsStore();
const vm = getCurrentInstance()!
const { useDrawer } = vm.appContext.config.globalProperties
const { visible, openDrawer, loading, closeDrawer } = useDrawer()
const websocketStore = useWebsocketStore()
const router = useRouter()
interface dataType {
    activeName: number;
    unReadMessageList: platMessageListType[],
    platName: string;
    noticeName: string
}
const stateData = reactive<dataType>({
    activeName: 2,
    unReadMessageList: [],
    platName: '平台消息',
    noticeName: '通知公告'
})
/**
 * @description:  初始化数据
 * @return {*}
 */
function initData(): void {
    openDrawer()
    getUnReadPlatMessage()
    getUnReadNotice()
    stateData.activeName = 2
}
/**
 * @description: 获取未读平台消息
 * @return {*}
 */
async function getUnReadPlatMessage(): Promise<void> {
    loading.value = true
    try {
        const res = await myPlatNotice()
        stateData.platName = res.data.num > 0 ? `平台消息(${res.data.num})` : `平台消息`
        if (stateData.activeName == 1) {
            stateData.unReadMessageList = res.data.messageList
        }
        loading.value = false
    } catch (error) {
        loading.value = false
    }
}
/**
 * @description: 获取未读通知公告
 * @return {*}
 */
async function getUnReadNotice(): Promise<void> {
    loading.value = true
    try {
        const res = await mySystemNotice()
        stateData.noticeName = res.data.num > 0 ? `通知公告(${res.data.num})` : '通知公告'
        if (stateData.activeName == 2) {
            stateData.unReadMessageList = res.data.messageList
        }
        loading.value = false
    } catch (error) {
        loading.value = false
    }

}
/**
 * @description: 切换平台消息和公告通知
 * @return {*}
 */
function changeMessageType(): void {
    if (stateData.activeName == 1) {
        getUnReadPlatMessage()
    } else {
        getUnReadNotice()
    }
}
/**
 * @description:  查看全部
 * @return {*}
 */
function handleMore(): void {
    if (stateData.activeName == 1) {
        const path =`${settingsStore.basicLoginAddress}/messageCenter/platformMessage?token=${getToken()}`
        openMessage(path)
    } else {
        const path =`${settingsStore.basicLoginAddress}/messageCenter/noticeList?token=${getToken()}`
        openMessage(path)
    }
    closeDrawer()
}
/**
 * @description: 跳转方法
 * @param {*} path
 * @return {*}
 */
function openMessage(path: string): void {
    window.open(path, '_blank')
}
/**
 * @description:  查看详情
 * @return {*}
 */
async function handleDetail(item: platMessageListType): Promise<void> {
    const path =`${settingsStore.basicLoginAddress}/message-detail?messageId=${item.messageId}&token=${getToken()}`
    openMessage(path)
    await read({ messageId: item.messageId })
    await initUnReadMessage()
    changeMessageType()
}
/**
 * @description:  全部标记已读
 * @return {*}
 */
async function handleAllRead(): Promise<void> {
    await clear({ messageCategory: stateData.activeName })
    await initUnReadMessage()
    changeMessageType()
}
/**
 * @description: 刷新小铃铛未读消息
 * @return {*}
 */
async function initUnReadMessage(): Promise<void> {
    const res = await unReadMessage()
    websocketStore.setIsUnReadMessage(res.data)
}
defineExpose({
    initData
})

</script>
<style lang="scss" scoped>
.unreadMessageDrawer {
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .headerTitle {
            font-size: 16px;
            font-weight: 500;
            color: #131414;
        }

        .headerMore {
            font-size: 13px;
            // color: #131414;
            margin-right: 8px;
            cursor: pointer;
        }
    }

    .content {
        height: 100%;

        .messageContent {
            .tabs {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 16px;

                .tabsButton {
                    :deep(.el-radio-button__inner) {
                        font-weight: 400;
                    }
                }
            }

            .unReadMessageList {

                .unReadMessageItem {
                    height: 62px;
                    box-sizing: border-box;
                    padding: 7px 0 7px 8px;
                    border-bottom: 1px solid #F2F6FC;
                    cursor: pointer;

                    .titleAndTime {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-bottom: 4px;
                        height: 22px;
                        line-height: 22px;

                        .title {
                            font-size: 14px;
                            font-weight: 500;
                            color: #131414;
                            width: 190px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis
                        }

                        .time {
                            font-size: 12px;
                            font-weight: normal;
                            color: #909399;
                        }
                    }

                    .unReadContent {
                        font-size: 13px;
                        color: #606266;
                        height: 22px;
                        line-height: 22px;
                        width: 100%;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }

                .emptybox {
                    text-align: center;
                    margin-top: 180px;

                    .no-message {
                        font-size: 130px;
                    }

                    .noMessageTip {
                        margin-top: 16px;
                        font-size: 14px;
                        font-weight: normal;
                        color: #909399;
                    }
                }
            }

        }
    }
}
</style>
